<template>
  <view class="page-address-list">
    <view class="address-wrap" v-if="address.length">
      <view class="address-item" @click="checked(index)" v-for="(item, index) in address" :key="index">
        <view v-if="type != 'address'" class="checkout-icon">
          <uni-icons
            :type="item.id == id ? 'checkbox-filled' : 'circle'"
            size="22"
            :color="item.id == id ? '#222' : '#aaa'"
          ></uni-icons>
        </view>
        <view class="content">
          <view class="item-top">
            <view class="left">
              <view class="firstname-wrap">
                <text class="name">{{ item.name }}</text>
                <text class="phone">{{ item.phone }}</text>
                <text v-if="type != 'address' && item.default" class="default-icon">{{ $t('common.text_default') }}</text>
              </view>
              <view class="address-info">
                {{ proxy.$util.formatAddress(item) }}
              </view>
            </view>
            <view class="right" @click.stop="proxy.$util.navigateTo('/pages/account/address/info/index', { id: item.id })">
              <uni-icons type="forward" size="18" color="#999"></uni-icons>
            </view>
          </view>
          <view class="item-bottom" v-if="type == 'address'">
            <view class="left" @click.stop="updateDefaultAddress(item)">
              <uni-icons
                :type="item.default ? 'checkbox-filled' : 'circle'"
                size="22"
                :color="item.default ? '#222' : '#999'"
              ></uni-icons>
              <view class="text">{{ $t('account.address.info.default') }}</view>
            </view>
            <view class="right" @click.stop="deleteAddress(item.id)">{{ $t('common.delete') }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="page-fixed-bottom" @click="proxy.$util.navigateTo('/pages/account/address/info/index')">
      <view class="btn-primary">
        <uni-icons type="plusempty" class="icon mr-1" size="16" color="#fff"></uni-icons>
        {{ $t('account.address.list.add_address') }}
      </view>
    </view>

    <no-item v-if="address && !address.length"></no-item>
  </view>
</template>

<script setup>
// import {ref,reactive} from "vue"
const { proxy } = getCurrentInstance()
import { t } from '@/locale/index'

const type = ref('address')
const id = ref(0)
let shipping_address_id = 0
let payment_address_id = 0

const address = ref([])

onLoad(e => {
  type.value = e.type || 'address'
  id.value = e[e.type] || 0
  shipping_address_id = e.shipping_address_id || 0
  payment_address_id = e.payment_address_id || 0
})

onShow(() => {
  loadData()
})

const loadData = () => {
  proxy.$http.get('addresses').then(res => {
    address.value = res.data
  })
}

const checked = index => {
  if (type.value == 'address') {
    uni.navigateTo({
      url: `/pages/account/address/info/index?id=${address.value[index].id}`
    })

    return;
  }

  id.value = address.value[index].id

  const params = {
    shipping_address_id,
    payment_address_id,
  }

  // 如果修改的是 配送地址，同时账单地址和配送地址相同，则修改的时候 要同时修改账单地址
  if (type.value == 'shipping_address_id' && shipping_address_id == payment_address_id) {
    params.shipping_address_id = id.value * 1
    params.payment_address_id = id.value * 1
  } else {
    params[type.value] = id.value * 1
  }

  proxy.$http.put('checkout', params).then(res => {
    uni.navigateBack()
  })
}

const deleteAddress = id => {
  uni.showModal({
    title: t('account.address.list.delete_address'),
    content: t('account.address.list.confirm_delete'),
    success: (res) => {
      if (res.confirm) {
        proxy.$http.del(`addresses/${id}`).then(res => {
          proxy.$util.msg({ title: t('common.edit_success'), icon: 'success' })
          loadData()
        })
      }
    }
  })
}

const updateDefaultAddress = item => {
  item.default = item.default ? 0 : 1
  proxy.$http.put(`addresses/${item.id}`, item).then(res => {
    proxy.$util.msg({ title: t('common.edit_success'), icon: 'success' })
    loadData()
  })
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
